<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            overflow: scroll;
            position: relative;
        }
        main{
            height: 1000px;
            background-image:linear-gradient(pink,aqua);
        }
    </style>
</head>

<body>
   
    <div> 
         
        <p>我是我是p标签</p>
        <!-- p{内容是$} -->
   
<P1>内容</P1>
<P2>内容</P2>
<P3>内容</P3>
<P4>内容</P4>
<P5>内容</P5>
<P6>内容</P6>
<P7>内容</P7>
<P8>内容</P8>
<P9>内容</P9>
<P10>内容</P10>
<P11>内容</P11>
<P12>内容</P12>
<P13>内容</P13>
<P14>内容</P14>
<P15>内容</P15>
<P16>内容</P16>
<P17>内容</P17>
<P18>内容</P18>
<P19>内容</P19>
<P20>内容</P20>


<P100>内容</P100>

    
    </div>
    <main></main>



    <script>
        window.onresize = function(){
            console.log("浏览器窗口大小改变了");
        }
        var div = document.querySelector('div');
      window.onkeydown = function(e){
        // e.key 是按下的键值
        // e.keyCode 是按下键的键码值
        // console.log("键盘按下事件",e);


        console.log(e.key);
        console.log(e.keyCode);
        var a  = div.getBoundingClientRect();
        console.log(a);

        if(e.keyCode == 68){
            div.style.left = a.left +2 +"px";
        }
        if(e.keyCode == 65){
            div.style.left = a.left -20 +"px";
        }
        }


        window.onwheel = function(){
            console.log("滚轮事件");
        }
       /*  window.onkeydown = function(){
            console.log("键盘抬起事件");
        }
 */

          /* window.onkeypress = function(){
            console.log("键盘点击事件");
        }
 */
       /*  // 内容卷起事件
        window.onscroll = function(){
            获取文档被卷走内容的高度
            console.log("页面滚动事件");
            console.log(document.documentElement.scrollTop);
        }
        var div = document.querySelector('div');


        div.onclick = function(){

            
        } */
        /* div.onclick = function () {
            console.log('被单击了');
        } */


        /*  div.ondblclick = function () {
             console.log("双击了");
         }
  */

        /*   div.oncontextmenu = function () {
              console.log("被右击了");
          } */

        /* 
                div.onmousedown = function () {
                    console.log("按下");
                }
                div.onmouseup = function () {
                    console.log("抬起");
                } */


// 给目标元素，以及所有后代元素都添加了一对事件 （不常用）
       /*  div.onmouseover = function () {
            console.log("11移入");
        }
        div.onmouseout = function () {
            console.log("移出1");
        } // 触发频率高


 */
      /*   div.onmouseenter = function () {
            console.log("2号移入----------");
        }
        div.onmouseleave = function () {
            console.log("2号移出====");
        }
 */


 // 会一直触发
      /*   div.onmousemove = function () {
            console.log("--------------");
        } */
      
    </script>
</body>

</html>